import React from 'react'

export default function TodoItem(props) {
  let {item, modifyTodo, removeTodo} = props;
  //声明函数
  let checkTodo = (id) => {
    return (e) => {
      //修改 done 属性
      modifyTodo(id, e.target.checked);// checked 是单选/多选框元素对象的属性
    }
  }

  //声明函数 点击按钮的回调
  let remove = (id) => {
    return () => {
      removeTodo(id);
    }
  }

  return (
    <li key={item.id}>
        <label>
          <input type="checkbox" checked={item.done} 
            onChange={checkTodo(item.id)}
          />
          <span className={item.done ? 'done' : ''}>{item.title}</span>
        </label>
        <button onClick={remove(item.id)} className="btn btn-danger">删除</button>
      </li>
  )
}
